<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul :class="isShow ? 'goods1' : 'goods2'">
        <li
          class="van-hairline--surround"
          v-for="(item, index) in list"
          :key="index"
          @click="jumpTo(item.proid)"
        >
          <img :src="item.img1" alt="" />
          <div>
            <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
            <p class="money">￥{{ item.originprice }}</p>
            <!-- {{list}} -->
          </div>
        </li>
        <div class="toggle" @click="isShow = !isShow">
          <van-icon name="apps-o" v-if="isShow" />
          <van-icon name="bars" v-if="!isShow" />
        </div>
      </ul>
    </van-list>
  </div>
</template>

<script>
import { getMyGoods } from "../../api/home";
import Vue from "vue";
import { Icon, List } from "vant";
Vue.use(List);
Vue.use(Icon);
export default {
  props: ["list", "count"],
  data() {
    return {
      isShow: true,
      loading: false,
      finished: false,
    };
  },
  methods: {
    jumpTo(proid){
      this.$router.push("/detail/"+proid)
    },
    onLoad() {
      this.loading = true;
      setTimeout(() => {
        getMyGoods({ count: this.count, limitNum: 10 }).then((data) => {
          this.loading = false;
          if (data.data.data.length == 0) {
            this.finished = true;
          } else {
            this.list.push(...data.data.data); //this.list会越来越多，this.list是下拉后请求的数据，将他从父组件传到子组件，然后直接用this.list操作，不能直接修改this.list，用push（改变原数组）直接插入修改
            this.$emit("mydata", this.count);//将值传给父进行修改，因为子不能直接修改通过父传进来的数据
          }
        });
      }, 1000);
    },
  },
};
</script>

<style scoped>
.goods1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* position: relative; */
}
.goods1 li {
  width: 48%;
}
.goods1 li img {
  width: 100%;
}
/* .goods2{
  position: relative;
} */
.goods2 li {
  display: flex;
}
.goods2 li img {
  width: 30%;
}
.goods2 li div {
  flex: 1;
}
.toggle {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 0.5rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
}
.money {
  color: red;
}
</style>